<style>
    .xm-select-dl {
        width: 380px !important;
    }

    .xm-select-linkage .xm-select-linkage-group li {
        height: 24px;
        line-height: 24px;
    }

        .xm-select-linkage .xm-select-linkage-group li span {
            line-height: 24px;
        }
</style>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <script type="text/html" template>
            <a><cite>{{layui.setter.MenuName}}</cite></a>
        </script>
    </div>
</div>


<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="app-content-list">

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">订单类型</label>
                    <div class="layui-input-inline">
                        <select name='Type' id='Type' lay-search>
                            <option value=""></option>
                            <option value="0">自提</option>
                            <option value="1">邮寄</option>
                        </select>
                    </div>
                    <label class="layui-form-label">是否为团购</label>
                    <div class="layui-input-inline">
                        <select name='IsGroupBuy' id='IsGroupBuy' lay-search>
                            <option value=""></option>
                            <option value="0">否</option>
                            <option value="1">是</option>
                        </select>
                    </div>

                    <label class="layui-form-label">订单状态</label>
                    <div class="layui-input-inline">
                        <select name='Starte' id='Starte' lay-search>
                            <option value=""></option>
                            <option value="0">待支付</option>
                            <option value="1">待发货</option>
                            <option value="3">已发货</option>
                            <option value="4">已完成</option>
                            <option value="5">取消</option>
                        </select>
                    </div>


                    <label class="layui-form-label">下单时间</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="test6" placeholder=" - ">
                    </div>
                </div>

            </div>



            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">商品分类</label>
                    <div class="layui-input-inline">
                        <select name='cateID' xm-select="cateID" id='cateID' xm-select-radio="" xm-select-search="">
                            <option value=""></option>
                        </select>
                    </div>


                    <div class="layui-inline">
                        <label class="layui-form-label">供应商</label>
                        <div class='layui-input-inline'>
                            <select name="selsupplier" xm-select="selsupplier" xm-select-radio="" xm-select-search xm-select-skin="default">
                                <option value=""></option>
                            </select>
                            <input type="hidden" name="SupplierSelector" id="SupplierSelector">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">店铺名称</label>
                        <div class="layui-input-inline">
                            <select name="StoreSelector" id="StoreSelector" xm-select="StoreSelector" xm-select-radio="" xm-select-search xm-select-skin="default">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>

                    <label class="layui-form-label">收货信息</label>
                    <div class="layui-input-inline">
                        <input type="text" name="receiveKey" id="receiveKey" placeholder="收货人姓名或者电话" autocomplete="off"
                            class="layui-input">
                    </div>


                    <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                    <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-delete">
                        <i class="layui-icon layui-icon-delete layuiadmin-button-btn"></i>
                    </button>

                </div>
            </div>
            <div style="padding-bottom: 10px;">
                <button class="layui-btn layuiadmin-btn-list" data-type="Export">导出数据</button>
            </div>
            <table id="LAY-app-content-list1" lay-filter="LAY-app-content-list1"></table>
        </div>
    </div>
</div>


<script>



    layui.use(['admin', 'table', 'form', 'laydate', 'formSelects'], function () {

        var $ = layui.$
            , admin = layui.admin
            , view = layui.view
            , table = layui.table
            , form = layui.form;
        var laydate = layui.laydate;
        var element = layui.element;

        var formSelects = layui.formSelects;

        form.render(null, 'app-content-list');


        laydate.render({
            elem: '#test6',
            range: '~' //指定元素
        });


        formSelects.config('selsupplier', {
            keyName: 'title',            //自定义返回数据中name的key, 默认 name
            keyVal: 'id',            //自定义返回数据中value的key, 默认 value
            keyChildren: 'children',    //联动多选自定义children
        });

        admin.req({
            url: layui.setter.APIUrl + '/shop/supplierMgr/customerQueryChildren2', //实际使用请改成服务端真实接口
            type: 'post',
            done: function (res) {
                layui.formSelects.data('selsupplier', 'local', {
                    arr: res.Data,
                    linkage: true,
                    linkageWidth: 100
                });
            }
        });
        formSelects.on('selsupplier', function (id, vals, val, isAdd, isDisabled) {
            if (isAdd == true) {
                if (val.value.indexOf("/") > 0 && ((val.value.split('/')).length - 1) >= 2) {  //多级选择时,第一级无法选中  供应商前两级都无法选中
                    var value = val.value.split('/')[val.value.split('/').length - 1];
                    $("#SupplierSelector").val(value);  //实际选中效果为多个ID组合 ‘id1/id2/id3’,取最后一个
                } else {
                    isAdd = false;
                    return false;
                }
            } else {
                $("#SupplierSelector").val("");
            }
        });


        formSelects.config('StoreSelector', {
            keyName: 'title',            //自定义返回数据中name的key, 默认 name
            keyVal: 'id',            //自定义返回数据中value的key, 默认 value
            keyChildren: 'children',    //联动多选自定义children
        });

        admin.req({
            url: layui.setter.APIUrl + '/shop/storeMgr/customerQueryChildren2', //实际使用请改成服务端真实接口
            type: 'post',
            async: false,
            done: function (res) {
                layui.formSelects.data('StoreSelector', 'local', {
                    arr: res.Data,
                    linkage: true,
                    linkageWidth: 120
                });
            }
        });
        formSelects.on('StoreSelector', function (id, vals, val, isAdd, isDisabled) {
            if (isAdd == true) {
                if (val.value.indexOf("/") <= 0) {  //多级选择时,第一级无法选中
                    isAdd = false;
                    return false;
                }
            }
        });


        formSelects.config('cateID', {
            keyName: 'title',            //自定义返回数据中name的key, 默认 name
            keyVal: 'id',            //自定义返回数据中value的key, 默认 value
            keyChildren: 'children',    //联动多选自定义children
        });

        admin.req({
            url: layui.setter.APIUrl + '/shop/GoodsCategoryMgr/customerQueryChildren', //实际使用请改成服务端真实接口
            type: 'post',
            done: function (res) {
                layui.formSelects.data('cateID', 'local', {
                    arr: res.Data,
                });
            }
        });
        //这里也算是给自己挖了一手好坑吧, 简单的一种处理方式, 在多选第一次打开的时候收缩所有的子节点, 目前处理的很粗鲁, 就是为了一种效果, 收缩全部节点
        var isFirst = true;
        layui.formSelects.opened('cateID', function (id) {
            if (isFirst) {
                isFirst = false;
                $('[fs_id="cateID"]').find('.xm-cz i.icon-caidan').click();
            }
        });

        form.render('select');

        function resText(d) {
            var tableText = "";

            if (d.State_Sel == 0) {
                tableText += `<div style="border-bottom: 1px solid #f2f2f2;margin: 0 -15px;padding: 0 15px; background-color: #f2f2f2;">${d.CreateTime}　　订单号：${d.OrderNumber}    交易单号:<span class='fontview' lay-event="changePrice" title='点击修改'>${d.BillCodestr}</span></div>`
            } else {
                tableText += `<div style="border-bottom: 1px solid #f2f2f2;margin: 0 -15px;padding: 0 15px; background-color: #f2f2f2;">${d.CreateTime}　　订单号：${d.OrderNumber}  交易单号:${d.BillCodestr}</div>`
            }

            $.each(d.Goods, function (index, eobj) {
                tableText += `
            <div class="product-item">
            <div class="product-img">
                <img  src="${ layui.setter.ImgPath + eobj.Path_Upload}" />
            </div>
            <div class="product-name">
                <p>${eobj.Name}</p>
                <p>规格:${eobj.Specifications}</p>
            </div>
            <div class="product-tool" style="height:100px;border-left:1px solid #f2f2f2; padding-left:5px;width:80px;display: flex;justify-content: center;align-items: center;">
               * ${eobj.Count}
            </div>
            <div class="product-tool" style="height:100px;border-left:1px solid #f2f2f2; padding-left:5px;width:80px;display: flex;justify-content: center;align-items: center;">
              ￥ ${eobj.Price}
            </div>
        </div>
            `
            });
            return tableText;
        }

        var colsdata = [[
            { type: 'checkbox', fixed: 'left', field: 'PID', totalRowText: '合计行' }, //sort: true  //hide: true //  width:100  
            {
                field: 'orderDetail', title: '订单详情', minWidth: 560, templet: function (d) {
                    return resText(d);
                }
            },
            {
                field: 'PayPrice', title: '订单金额', width: 90, 
                totalRow: true
            },
            {
                field: 'storeName', title: '店铺和供应商', width: 90, templet: function (d) {
                    var btnText = "";
                    if (d.storeName) {
                        btnText += "店铺:" + d.storeName
                    }
                    if (d.SupplierName) {
                        btnText += "<br/>供应商:" + d.SupplierName
                    }
                    return btnText;
                }, width: 170
            },
            {
                field: 'CreateTime', title: '订单状态', width: 130, templet: function (d) {

                    var btnText = "";

                    var DistributionMode_Sel = d.DistributionMode_Sel;
                    var strDes = '配送方式[1.快递|2.自提]';
                    var strDes = strDes.substr(strDes.indexOf("[") + 1, strDes.indexOf("]") - strDes.indexOf("[") - 1);
                    var lists = strDes.split('|');
                    if (lists[0].split('.')[0] == DistributionMode_Sel) {
                        btnText += '<button class="layui-btn layui-btn-xs">' + lists[0].split('.')[1] + "</button>";// layui-btn-primary
                    }
                    else {
                        btnText += '<button class="layui-btn layui-btn-primary layui-btn-xs">' + lists[1].split('.')[1] + "</button>";// layui-btn-primary
                    }

                    var State_Sel = d.State_Sel;
                    var strDes = '订单状态[0.待支付|1.待发货|2.部分发货|3.发货完成|4.已完成|5.取消|6.关闭]';
                    var strDes = strDes.substr(strDes.indexOf("[") + 1, strDes.indexOf("]") - strDes.indexOf("[") - 1);
                    var lists = strDes.split('|');
                    for (var i = 0; i < lists.length; i++) {
                        if (lists[i].split('.')[0] == State_Sel) {
                            btnText += '<br/>' + '<button class="layui-btn layui-btn-xs">' + lists[i].split('.')[1] + "</button>";// layui-btn-primary
                        }
                    }

                    if (d.PickCode) {
                        btnText += '<br/>自提码:' + d.PickCode
                    }

                    return btnText;
                }
            },
            {
                field: 'IsGroupBuy', title: '是否为团购', width: 100, templet: function (d) {
                    var IsGroupBuy = d.IsGroupBuy;
                    var strDes = '物流状态[0.否|1.是]';
                    var strDes = strDes.substr(strDes.indexOf("[") + 1, strDes.indexOf("]") - strDes.indexOf("[") - 1);
                    var lists = strDes.split('|');
                    for (var i = 0; i < lists.length; i++) {
                        if (lists[i].split('.')[0] == IsGroupBuy) {
                            return '<button class="layui-btn layui-btn-xs">' + lists[i].split('.')[1] + "</button>";// layui-btn-primary
                        }
                    }
                    return '暂无数据';
                }, minWidth: 80, align: 'center'
            },
            {
                field: 'UserName', title: '顾客信息', style: "", width: 230, templet: function (d) {
                    var srt = "<div style='font-size:8px'>";
                    srt += "联系人:" + d.UserName + " ";
                    srt += "联系电话:" + d.UserTel + "";
                    srt += "<br/>联系地址:" + d.UserAddress + "";

                    if (d.State_Sel == 1) {
                        srt += "<br/><a class='font2' lay-event=\"updatesh\">修改</a>";
                    }
                    srt += "</div>";
                    return srt;
                }
            },
        ]];

        table.render({
            elem: "#LAY-app-content-list1"
            , toolbar: true  //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , defaultToolbar: ['filter']
            , method: "post"
            , totalRow: true
            , url: layui.setter.APIUrl + '/Shop/orderMgr/listPainDetail'
            , headers: { //通过 request 头传递
                Authorization: "bearer " + layui.data('layuiAdmin').access_token
            }
            , parseData: function (res) { //res 即为原始返回的数据 
                varButtonRight = res.Data.ButtonRight;
                return {
                    "ResultCode": res.ResultCode, //解析接口状态
                    "ResultInfo": res.ResultInfo, //解析提示文本
                    "count": res.Data.TotalRecordCount, //解析数据长度
                    "Data": res.Data.Items //解析数据列表 
                };
            },
            done: function () {
                // var objtable0 = $("#" + element + "item .layui-table")[1];
                // var objtable1 = $("#" + element + "item  .layui-table")[3];
                // var objtable2 = $("#" + element + "item  .layui-table")[5];
                // $(objtable0).find("tr").each(function (index, obj) {
                //     var objtr1 = $(objtable1).find("tr")[index];
                //     $(objtr1).attr("height", obj.scrollHeight);
                //     var objtr2 = $(objtable2).find("tr")[index];
                //     $(objtr2).attr("height", obj.scrollHeight);
                // })
                // $(".layui-tab-item .layui-show .layui-table").attr("style", "height: inherit !important;");
            }
            , cols: colsdata
            , page: true
            , limit: 50
            , limits: [50, 100, 150, 200]
            , text: {
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增 text: '对不起，加载出现异常！'
            }
        });


        var active = {
            Export: function (d) {
                var whereStr = "";
                var formSelects = layui.formSelects;
                var Type = $("#Type").val();
                if (Type) {
                    whereStr += "&Type=" + Type;
                }
                var cateID = formSelects.value('cateID', 'valStr');
                if (cateID) {
                    cateID += "&cateID=" + cateID;
                }
                var IsGroupBuy = $("#IsGroupBuy").val();
                if (IsGroupBuy) {
                    whereStr += "&IsGroupBuy=" + IsGroupBuy;
                }
                var SupplierSelector = $("#SupplierSelector").val();
                if (SupplierSelector) {
                    whereStr = "&SupplierSelector=" + SupplierSelector;
                }

                var StoreSelector = $("#StoreSelector").val();
                if (StoreSelector) {
                    whereStr = "&StoreSelector=" + StoreSelector;
                }

                var Starte=$("#Starte").val();
                if(Starte)
                {
                    whereStr = "&state=" + Starte;
                }

                var dataTime = $("#test6").val();
                if (dataTime) {
                    var times = dataTime.split('~');
                    if (times[0].trim()) {
                        whereStr = "&startTime=" + times[0].trim();
                    }

                    if (times[1].trim()) {
                        whereStr = "&startTime=" + times[1].trim();
                    }
                }

                var receiveKey = $("#receiveKey").val();

                if (receiveKey) {
                    whereStr = "&receiveKey=" + receiveKey.trim();
                }


                window.open(layui.setter.APIUrl + "/Shop/OrderMgr/exportOrderInfo?access_token="
                    + layui.data('layuiAdmin').access_token + whereStr);
                alert("导出成功");

            }
        };


        $('.layui-btn.layuiadmin-btn-list').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        form.on('submit(LAY-app-contlist-delete)', function (data) {
            $("#test6").val('');
            $("#Type").val('');
            $("#IsGroupBuy").val('');
            $("#Starte").val('');
            layui.formSelects.value('selsupplier', []);
            $("#SupplierSelector").val('');
            layui.formSelects.value('StoreSelector', []);
            $("#receiveKey").val('');
            layui.formSelects.value('cateID', []);

            form.render("select");

            table.reload("LAY-app-content-list1", {
                where: {
                    startTime: "",
                    endTime: "",
                    groupId: "",
                    Type: "",
                    IsGroupBuy: "",
                    SupplierSelector: "",
                    StoreSelector: "",
                    receiveKey: "",
                    cateID: "",
                    Starte: ""
                },
                page: {
                    curr: 1 //重新从第1页开始
                }
            });
        });



        //监听搜索
        form.on('submit(LAY-app-contlist-search)', function (data) {
            var field = data.field;
            debugger
            //执行重载
            table.reload('LAY-app-content-list1', {
                where: field,
                page: {
                    curr: 1 //重新从第1页开始
                }
            });
        });
    });



</script>